<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Auth</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="Author" content="网页作者" />
    <meta name="Copyright" content="网站版权" />
    <meta name="keywords" content="网站关键字" />
    <meta name="description" content="网站描述" />
    <style>
      @keyframes gradientBG {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      html,
      body {
        height: 100%;
      }

      html {
        overflow-y: scroll;
      }

      body {
        margin: 0;
        font: 12px "\5B8B\4F53", sans-serif;
        background: #f0f2f5;
        font-family: "Exo", sans-serif;
        color: #fff;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
      }

      div,
      dl,
      dt,
      dd,
      ul,
      ol,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      pre,
      form,
      fieldset,
      input,
      textarea,
      blockquote,
      p {
        padding: 0;
        margin: 0;
      }

      table,
      td,
      tr,
      th {
        font-size: 12px;
      }

      li {
        list-style-type: none;
      }

      img {
        vertical-align: top;
        border: 0;
      }

      ol,
      ul {
        list-style: none;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 12px;
        font-weight: normal;
      }

      address,
      cite,
      code,
      em,
      th {
        font-weight: normal;
        font-style: normal;
      }

      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      .container {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      .auth-box {
        width: 500px;
        background: #fff;
        border-radius: 7px;
        overflow: hidden;
        box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        padding-right: 55px;
        padding-left: 55px;
        padding-bottom: 50px;
        padding-top: 65px;
      }
      .auth-box-title,
      .auth-box-subtitle {
        display: block;
        font-family: OpenSans-Regular;
        color: #555555;
        line-height: 1.2;
        text-align: center;
        padding-bottom: 28px;
      }
      .auth-box-title {
        font-size: 30px;
      }
      .auth-box-subtitle {
        font-size: 25px;
      }
      .auth-box-error {
        display: none;
        font-family: OpenSans-Regular;
        font-size: 15px;
        color: #555555;
        line-height: 1.2;
        text-align: left;
        margin-bottom: 8px;
        padding: 8px;
        background-color: pink;
      }
      .btn-primary {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        width: 100%;
        height: 60px;
        background-color: #4272d7;
        font-family: OpenSans-Regular;
        font-size: 14px;
        color: #fff;
        line-height: 1.2;
        text-transform: uppercase;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        outline: none !important;
        border: none;
      }
    </style>
    <script type="text/javascript">
      function queryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        var q = window.location.pathname.substr(1).match(reg_rewrite);
        if (r != null) {
          return unescape(r[2]);
        } else if (q != null) {
          return unescape(q[2]);
        } else {
          return null;
        }
      }
      window.onload = function () {
        var errMsg = queryString("error");
        if (!!errMsg) {
          var lbe = document.getElementsByClassName("auth-box-error")[0];
          lbe.innerText = "ERROR: " + errMsg;
          lbe.style.display = "block";
        }
      };
    </script>
  </head>

  <body>
    <div class="container">
      <div class="auth-box">
        <form action="/api/sys/cas/affirm" method="POST">
          <span class="auth-box-title">Authorize</span>
          <span class="auth-box-error">ERROR: </span>
          <span class="auth-box-subtitle"
            >The client would like to perform actions on your behalf.</span
          >
          <p>
            <button type="submit" class="btn btn-primary btn-lg">Allow</button>
          </p>
        </form>
      </div>
    </div>
  </body>
</html>
